(function ($) {
    function Swiper(opt) {
        var opts = opt || {};
        this.img = opts.image;
        this.wrap = opts.father;
        //入门函数
        this.init();
    }
    //入门函数
    Swiper.prototype.init = function () {
        this.flag = true;//锁。标记的那个钱图片是否可以移动
        this.nowIndex = 0;//当
        this.itemWidth = parseInt(this.wrap.css("width"));//每次移动的单位
        this.itemHeight = parseInt(this.wrap.css("height"));//图片展示的高度
        this.len = this.img.length - 1;
        this.timer = undefined;

        this.cretaDom();

        
        //自动播放
        this.sliderAuto();
        //点击切换
        this.bindEvent();
    }
    //根据传参添加dom结构
    Swiper.prototype.cretaDom = function () {
        var len = this.len;
        var str = "";
        var listStr = "";
        var order = $(' <div class="order"></div>');
        var imgBox = $('<ul class="imgBox"></ul>');
        var btn = $(' <div class="slider-btn"><span class="previous">&lt;</span><span class="next">&gt;</span></div>');
        var list = $('<ul class="orderUl"></ul>');
        for (var i = 0; i < len; i++) {
            str += "<li><a href=\"\"><img src='" + this.img[i] + "'></a></li>";
            listStr += '<li></li>';
        }
        str += "<a href=\"\"><img src='" + this.img[0] + "'></a>";

        this.wrap.append(imgBox.append(str))
            .append(btn)
            .append(order.append(list.append(listStr)));

        $(".imgBox").css({'width':len * this.itemWidth,'height':this.itemHeight});
        $("img").css({'width':'1086px','height':'320px'});

        this.wrap.css('overflow','hidden');
    }

     //根据点击源对象，获取到当前的li索引
     Swiper.prototype.move = function (dir) {
         var self = this;
        if (this.flag) {
            this.flag = false;
            if (dir == 'previous') {
                if (self.nowIndex == 0) {
                    //ul整体移动
                    $('.imgBox').css({
                        left: -(self.len * self.itemWidth)
                    })
                    this.nowIndex = this.len - 1;
                } else {
                    this.nowIndex = this.nowIndex - 1;
                }
            } else if (dir == 'next') {
                if (this.nowIndex == this.len - 1) {
                    $('.imgBox').animate({
                        left: -(self.len * self.itemWidth)
                    }, function () {
                        $('.imgBox').css({
                            left: 0
                        })
                        self.flag = true;
                        self.sliderAuto();
                    });
                    this.nowIndex = 0;
                } else {
                    this.nowIndex = this.nowIndex + 1;
                }
            } else {
                this.nowIndex = dir;
            }
            this.slider();
            this.changeStyle()
        }

    }
    Swiper.prototype.sliderAuto = function () {
        var self = this;
        clearTimeout(this.timer);
        this.timer = setTimeout(function () {
            self.move('next');
        }, 2000)
    }

    Swiper.prototype.bindEvent = function () {
        self = this;
        $('.btn span').add('.order li').on('click', function () {
            console.log(this);
            var className = $(this).attr('class');
            if (className == 'previous') {
                self.move(className);
            } else if (className == 'next') {
                self.move('next');
            } else {//点击圆点
                var index = $(this).index();
                self.move(index);
            }
        })

        self.wrap.on('mouseenter',function(){
            $('.order').css('display','block');
            // $('.btn').css('display','block');
        }).on('mouseleave',function(){
            $('.order').css('display','none');
            // $('.btn').css('display','none');
        });
    }
  
   


    //根据全局nowIndex(记录当前应该被展示的图片索引)来展示图片
    Swiper.prototype.slider = function () {
        var self = this;
        $('.imgBox').animate({
            left: -(self.nowIndex * self.itemWidth),
        }, function () {
            self.flag = true;
            self.sliderAuto();
        })

    }

    Swiper.prototype.changeStyle = function () {
        $('#slider .active').removeClass('active');
        $('#slider .order li').eq(this.nowIndex).addClass('active');
    }
    $.fn.extend({
        sliderImg: function (option) {
            option.father = this || $("body");
            new Swiper(option);
        }

    })
})(jQuery)